import CustomInput from '@/components/antd-comp/input/CustomInput'
import CustomSelect from '@/components/antd-comp/select/CustomSelect'
import { CommonSmallAdddButton, CommonSmallSvg } from '@/pages/workflow/components/CommonSmallTemp'
// import { Button } from 'antd'
import { INPUT_CONSTRAINTS } from '@/pages/workflow/components/InspectData'
import { useEffect, useState } from 'react'
import { showMessage } from '@/components/antd-comp/message'
import { checkArrayItemsRepeat,checkDefaultRequiredArrayItems } from '@/pages/workflow/utils'

const selectOptions = [
  { value: 'str', label: 'String' },
  { value: 'int', label: 'Integer' },
  { value: 'float', label: 'Number' },
  { value: 'bool', label: 'Boolean' },
]

/* 模型-输出 */
export default function ExportationCont({ info, editData }) {
  const [optionList, setOptionList] = useState([])

  useEffect(() => {
    setOptionList(info.outputList)
  }, [info])

  const addOption = () => {
    if (optionList.length === INPUT_CONSTRAINTS.VARIABLE_CONT) {
      showMessage({
        content: INPUT_CONSTRAINTS.VARIABLE_CONT_TITLE + INPUT_CONSTRAINTS.VARIABLE_CONT,
        type: 'warning'
      })
      return
    }
    // 添加新项
    const newOutputList = [
      ...optionList,
      {
        variable: '',
        value: '',
        type: 'str',
        value_selector: []
      }
    ]
    setOptionList(newOutputList)

    editData({
      outputList: newOutputList
    })
  }

  const delOption = i => {
    const newList = [...optionList]
    newList.splice(i, 1)
    setOptionList(newList)
    editData({
      outputList: newList
    })
  }

  return (
    <div className="flexCol InputCont_case">
      <div className="flexRowStart columns-title--dGaYetSzjjUdXN_u9_8J">
        <div className="input-head" style={{ width: '140px' }}>
          变量名称
        </div>

        <div className="input-head w-[calc((100%-140px)*0.4)]">变量类型</div>

      </div>
      {/* options */}
      {optionList?.map((item, i) => (
        <div key={i} className="flexRowStart  flexRowJustBet InputCont_marTop">
          <div className="flexRowStart flexRowJustBet w-[92%]">
            {/* 变量名称 */}
            <div style={{ width: '140px' }}>
              <CustomInput placeholder="输入变量名称" value={item.variable} onChange={e => {
                const newList = optionList.map((obj, index) => {
                  if (index === i) {
                    return { ...obj, variable: e.target.value, }
                  }
                  return obj
                })
                setOptionList(newList)
                editData({
                  outputList: newList
                })
              }} />
            </div>
            <div className="inputCont_end" style={{ width: 'calc(100% - 140px)' }}>
              {/* 变量类型 */}
              <CustomSelect
                style={{ width: '100%' }}
                value={item.type}
                options={selectOptions} onChange={e => {
                  const newList = optionList.map((obj, index) => {
                    if (index === i) {
                      return { ...obj, type: e, }
                    }
                    return obj
                  })
                  setOptionList(newList)
                  editData({
                    outputList: newList
                  })
                }}
                placeholder="变量类型"
              />
            </div>
          </div>

          {i > 0 && <CommonSmallSvg delOption={delOption} i={i}></CommonSmallSvg>}
        </div>
      ))}
     {!checkDefaultRequiredArrayItems(optionList, ['variable']) ? (
        <div className="custom-params-invalid mt-[8px]">变量不能为空</div>
      ) : (
        !checkArrayItemsRepeat(optionList, ['variable']) && (
          <div className="custom-params-invalid">变量不能重复</div>
        )
      )}
      {/* 新增 */}
      <CommonSmallAdddButton addOption={addOption}></CommonSmallAdddButton>
    </div>
  )
}
